{% extends 'base.html'%}
{% load static %}
{%load i18n%}
{%block title%}{%trans 'Credential list' %}{%endblock%}
{% block css %}
<link rel="stylesheet" href="{% static 'plugins/bootstrap-select/css/bootstrap-select.css' %} ">
<link rel="stylesheet" href="{% static 'plugins/json-forms/css/brutusin-json-forms.css' %} ">
<!-- DataTables css -->
<link rel="stylesheet" href="{% static "plugins/datatables/dataTables.bootstrap.css" %}">
<link rel="stylesheet" href="{% static "plugins/json-view/jquery.jsonview.min.css" %}">
{% endblock %}
{% block content %}
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <!-- BEGIN EXAMPLE TABLE PORTLET-->
            <div class="box box-success">
                <div class="box-header with-border">
                    <div class="caption">
                        <button class="btn btn-primary" onclick="window.location.href = '{% url 'credentialcreate' %}'">
                            {% trans 'Add New' %}
                            <i class="fa fa-plus"></i>
                        </button>
                    </div>

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                        <div class="btn-group">
                            <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-wrench"></i></button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">{%trans 'Action' %}</a></li>
                                <li><a href="#">{%trans 'Another action' %}</a></li>
                                <li><a href="#">{%trans 'Something else here' %}</a></li>
                                <li class="divider"></li>
                                <li><a href="#">{%trans 'Separated link' %}</a></li>
                            </ul>
                        </div>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <table id="commands_list" class="table table-hover table-striped">
                        <thead>
                        <tr>
                            <th>{%trans 'name' %}</th>
                            <th>{%trans 'username' %}</th>
                            <th>{%trans 'port' %}</th>
                            <th>{%trans 'action' %}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for element in object_list %}
                        <tr>
                            <td>{{ element.name }}</td>
                            <td>{{ element.username }}</td>
                            <td class="json">{{ element.port}}</td>
                            <td data-editable="false" class="text-center pull-left">
                                {% if perms.common.can_view_credential %}<a class="btn btn-xs btn-primary" onclick="detail({{element.id}})">{%trans 'detail' %}</a>{% endif %}
                                {% if perms.common.can_change_credential %}<a class="btn btn-xs btn-info" onclick="edit({{element.id}})">{%trans 'edit' %}</a>{% endif %}
                                {% if perms.common.can_delete_credential %}<a class="btn btn-xs btn-danger" onclick="del({{element.id}},'{{element.name}}')">{%trans 'delete' %}</a>{% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- END EXAMPLE TABLE PORTLET-->
        </div>

    </div>
</section>
{% endblock %}
{% block js %}
<script src="{% static 'plugins/markdown/markdown.js' %} "></script>
<script src="{% static 'plugins/bootstrap-select/js/bootstrap-select.js' %} "></script>
<script src="{% static 'plugins/bootstrap-select/js/i18n/defaults-en_US.js' %} "></script>
<script src="{% static 'plugins/json-forms/js/brutusin-json-forms.js' %} "></script>
<script src="{% static 'plugins/json-forms/js//brutusin-json-forms-bootstrap.js' %} "></script>
<!-- DataTables -->
<script src="{% static "plugins/datatables/jquery.dataTables.min.js" %}"></script>
<script src="{% static "plugins/datatables/dataTables.bootstrap.min.js" %}"></script>
<script src="{% static "plugins/json-view/jquery.jsonview.min.js" %}"></script>
<script src="{% static "plugins/bootbox/bootbox.js" %}"></script>
<script type="application/javascript">
    $(function () {
        $('#commands_list').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": true,
            "ordering": true,
            "info": true,
            "iDisplayLength": 50,
            "autoWidth": false,
        });
    });
</script>
<script type="application/javascript">
    function detail(id) {
        var dialog = bootbox.dialog({
            title: '{% trans 'Credential detail' %}',
            message: '<p><i class="fa fa-spin fa-spinner"></i> {%trans 'Loading...' %}</p>'
        });
        dialog.init(function(){
            $.ajax({
                url: '{% url 'credentialdetailapi' %}',
                type: 'POST',
                data: {'id':id},
                success: function(data, textStatus, jqXHR) {
                    dialog.find('.bootbox-body').html("<div id='container'></div>");
                    generateform(data.message,true);
                },
                error: function(data, textStatus, jqXHR) {
                    toastr['error'](data);
                }
            });
        });
    }
    function edit(id) {
        var dialog = bootbox.confirm({
            title: '{% trans 'Credential edit' %}',
            message: '<p><i class="fa fa-spin fa-spinner"></i> {%trans 'Loading...' %}</p>',
            buttons: {
                confirm: {
                    label: '{%trans 'submit' %}',
                    className: 'btn-danger'
                },
                cancel: {
                    label: '{%trans 'cancel' %}',
                    className: 'btn-success'
                }
            },
            callback: function (result) {
                if (result){
                    if ($.gbf.validate()) {
                        var jsondata = $.gbf.getData();
                        jsondata["action"] = "update";
                        jsondata["id"] = id;
                        if (jsondata.protocol == 'ssh-password') {
                            delete jsondata.key;
                        } else if (jsondata.protocol == 'ssh-key'){
                            jsondata.key = jsondata.password;
                            delete jsondata.password;
                        } else{
                            delete jsondata.key;
                        };
                        $.ajax({
                            type: "POST",
                            url: "{% url 'credentialcreate' %}",
                            data: JSON.stringify(jsondata, null, 4),
                            dataType: "json",
                            success: function (data) {
                                if(data.status){
                                    toastr["success"](data.message);
                                    setTimeout(function () {
                                        location.reload();
                                    },2000);
                                } else {
                                    toastr["error"](data.message);
                                }
                            },
                            failure: function (errMsg) {
                                toastr["error"](errMsg);
                            }
                        });
                    }
                }
            }
        });
        dialog.init(function(){
            $.ajax({
                url: '{% url 'credentialdetailapi' %}',
                type: 'POST',
                data: {'id':id},
                success: function(data, textStatus, jqXHR) {

                    dialog.find('.bootbox-body').html("<div id='container'></div>");
                    generateform(data.message,false);
                },
                error: function(data, textStatus, jqXHR) {
                    toastr['error'](data);
                }
            });
        });
    };
    function del(id,name) {
        var dialog = bootbox.confirm({
            title: "<a class='text-danger'>"+'{%trans 'delete credential name' %} ' + name +"</a>",
            message: '{% trans 'Are you sure to delete credential' %} ' + name +' ?',
            buttons: {
                confirm: {
                    label: '{%trans 'delete' %}',
                    className: 'btn-danger'
                },
                cancel: {
                    label: '{%trans 'cancel' %}',
                    className: 'btn-success'
                }
            },
            callback: function (result) {
                if (result){
                    $.ajax({
                        type: "POST",
                        url: "{% url 'credentialcreate' %}",
                        data: JSON.stringify({"id":id,"action":'delete',"name":name}),
                        dataType: "json",
                        success: function (data) {
                            if(data.status){
                                toastr["success"](data.message);
                                setTimeout(function () {
                                    location.reload();
                                },2000);
                            } else {
                                toastr["error"](data.message);
                            }
                        },
                        failure: function (errMsg) {
                            toastr["error"](errMsg);
                        }
                    });
                }
            }
        });
    };
    function generateform(data,readonly) {
         if (data.method == 'key' && data.protocol == 'ssh-key'){
             data.password = data.key;
         }
         if (readonly){
            var schema = {
                "type": "object",
                "properties": {
                    "name": {
                        "type": "string",
                        'title': "{%trans 'credential name' %}",
                        "description": "{%trans 'credential name' %}",
                        "required": true,
                        "minLength": 1,
                        "maxLength": 40,
                        "readOnly": true
                    },
                    "protocol": {
                        "type": "string",
                        'title': "{%trans 'protocol' %}",
                        "description": "{%trans 'protocol' %}",
                        "required": true,
                        "default": "ssh",
                        "enum":[
                            "ssh-password",
                            "ssh-key",
                            "vnc",
                            "rdp",
                            "telnet",
                        ]
                    },
                    "username": {
                        "type": "string",
                        'title': "{%trans 'username' %}",
                        "description": "{%trans 'username name' %}",
                        "required": true,
                        "minLength": 1,
                        "maxLength": 40,
                        "readOnly": true
                    },
                    "port": {
                        "type": "number",
                        'title': "{%trans 'port' %}",
                        "description": "{%trans 'port number' %}",
                        "required": true,
                        "default": 22,
                        "readOnly": true
                    },
                    "method": {
                        "type": "string",
                        'title': "{%trans 'method' %}",
                        "description": "{%trans 'method' %}",
                        "required": true,
                        "default": "password",
                        "enum": [
                            "password",
                            "key",
                        ],
                        "readOnly": true
                    },
                    "security":{
                        "dependsOn": [
                            "protocol",
                        ],
                        "readOnly": true
                    },
                    "password": {
                        "dependsOn": [
                            "method",
                        ],
                        "readOnly": true
                    },
                    "key": {
                        "dependsOn": [
                            "method",
                        ],
                        "readOnly": true
                    },
                    "proxy": {
                        "type": "boolean",
                        "title": "{%trans 'proxy' %}",
                        "description": "{%trans 'enable proxy' %}",
                        "default": false,
                        "properties": {
                            "enabled": {
                                "type": "boolean",
                                "title": "{%trans 'Enabled' %}"
                            },
                        },
                        "required": [
                            "enabled"
                        ],
                        "readOnly": true
                    },
                    "proxyserverip": {
                        "dependsOn": [
                            "proxy",
                        ],
                        "readOnly": true
                    },
                    "proxyport": {
                        "dependsOn": [
                            "proxy",
                        ],
                        "readOnly": true
                    },
                    "proxypassword": {
                        "dependsOn": [
                            "proxy",
                        ],
                        "readOnly": true
                    },
                    "width": {
                        "dependsOn": [
                            "protocol",
                        ]
                    },
                    "height": {
                        "dependsOn": [
                            "protocol",
                        ]
                    },
                    "dpi": {
                        "dependsOn": [
                            "protocol",
                        ]
                    },
                }
            };
        }else {
            var schema = {
                "type": "object",
                "properties": {
                    "name": {
                        "type": "string",
                        'title': "{%trans 'credential name' %}",
                        "description": "{%trans 'credential name' %}",
                        "required": true,
                        "minLength": 1,
                        "maxLength": 40,
                    },
                    "protocol": {
                        "type": "string",
                        'title': "{%trans 'protocol' %}",
                        "description": "{%trans 'protocol' %}",
                        "required": true,
                        "default": "ssh",
                        "enum":[
                            "ssh-password",
                            "ssh-key",
                            "vnc",
                            "rdp",
                            "telnet",
                        ]
                    },
                    "security":{
                        "dependsOn": [
                            "protocol",
                        ]
                    },
                    "username": {
                        "type": "string",
                        'title': "{%trans 'username' %}",
                        "description": "{%trans 'username name' %}",
                        "required": true,
                        "minLength": 1,
                        "maxLength": 40,
                    },
                    "port": {
                        "type": "number",
                        'title': "{%trans 'port' %}",
                        "description": "{%trans 'port number' %}",
                        "required": true,
                        "default": 22,
                    },
                    "method": {
                        "type": "string",
                        'title': "{%trans 'method' %}",
                        "description": "{%trans 'method' %}",
                        "required": true,
                        "default": "password",
                        "enum": [
                            "password",
                            "key",
                        ],
                        "readOnly": true
                    },
                    "password": {
                        "dependsOn": [
                            "method",
                        ]
                    },
                    "key": {
                        "dependsOn": [
                            "method",
                        ]
                    },
                    "proxy": {
                        "type": "boolean",
                        "title": "{%trans 'proxy' %}",
                        "description": "{%trans 'enable proxy' %}",
                        "default": false,
                        "properties": {
                            "enabled": {
                                "type": "boolean",
                                "title": "{%trans 'Enabled' %}"
                            },
                        },
                        "required": [
                            "enabled"
                        ]
                    },
                    "proxyserverip": {
                        "dependsOn": [
                            "proxy",
                        ]
                    },
                    "proxyport": {
                        "dependsOn": [
                            "proxy",
                        ]
                    },
                    "proxypassword": {
                        "dependsOn": [
                            "proxy",
                        ]
                    },
                    "width": {
                        "dependsOn": [
                            "protocol",
                        ]
                    },
                    "height": {
                        "dependsOn": [
                            "protocol",
                        ]
                    },
                    "dpi": {
                        "dependsOn": [
                            "protocol",
                        ]
                    },
                }
            };
        }


        function resolver(names, data, cb) {
            var schemas = new Object();
            var schema = new Object();
            var proxyserveripschema = new Object();
            var proxyportschema = new Object();
            var proxypasswordschema = new Object();
            var widthschema = new Object();
            var heightschema = new Object();
            var dpischema = new Object();
            var securityschema = new Object();
            if (data.protocol === "ssh-key") {
                schema.type = "string";
                schema.title = "key";
                schema.format = "text";
                schema.required = true;

                widthschema.type = "null";
                heightschema.type = "null";
                dpischema.type = "null";
            } else if (data.protocol == "ssh-password") {
                schema.type = "string";
                schema.title = "{%trans 'password' %}";
                schema.format = "password";
                schema.required = true;
                schema.maxLength = 40;

                widthschema.type = "null";
                heightschema.type = "null";
                dpischema.type = "null";
            } else if (data.protocol == "rdp") {
                schema.type = "string";
                schema.title = "{%trans 'password' %}";
                schema.format = "password";
                schema.required = true;
                schema.maxLength = 40;

                widthschema = {
                    "type": "number",
                    'title': "{%trans 'width' %}",
                    "description": "{%trans 'width' %}",
                    "required": true,
                    "default": 1024,
                    "readOnly": readonly
                };

                heightschema={
                    "type": "number",
                    'title': "{%trans 'height' %}",
                    "description": "{%trans 'height' %}",
                    "required": true,
                    "default": 768,
                    "readOnly": readonly
                };

                dpischema={
                    "type": "number",
                    'title': "{%trans 'dpi' %}",
                    "description": "{%trans 'dpi' %}",
                    "required": true,
                    "default": 96,
                    "readOnly": readonly
                };

                securityschema = {
                        "type": "string",
                        'title': "{%trans 'security' %}",
                        "description": "{%trans 'security' %}",
                        "required": true,
                        "default": "any",
                        "readOnly": false,
                        "enum":[
                            "rdp",
                            "nla",
                            "tls",
                            "any"
                    ],
                };
            } else {
                schema.type = "string";
                schema.title = "{%trans 'password' %}";
                schema.format = "password";
                schema.required = true;
                schema.maxLength = 40;

                widthschema = {
                    "type": "number",
                    'title': "{%trans 'width' %}",
                    "description": "{%trans 'width' %}",
                    "required": true,
                    "default": 1024,
                    "readOnly": readonly
                };

                heightschema={
                    "type": "number",
                    'title': "{%trans 'height' %}",
                    "description": "{%trans 'height' %}",
                    "required": true,
                    "default": 768,
                    "readOnly": readonly
                };

                dpischema={
                    "type": "number",
                    'title': "{%trans 'dpi' %}",
                    "description": "{%trans 'dpi' %}",
                    "required": true,
                    "default": 96,
                    "readOnly": readonly
                };
            }
            if (readonly){
                schema.readOnly = true;
            };
            if (data.proxy) {
                proxyserveripschema.type = "string";
                proxyserveripschema.title = "{%trans 'proxy server ip' %}";
                proxyserveripschema.format = "ipv4";
                proxyserveripschema.required = true;

                proxyportschema.type = "number";
                proxyportschema.title = "{%trans 'proxy port' %}";
                proxyportschema.required = true;

                proxypasswordschema.type = "string";
                proxypasswordschema.title = "{%trans 'proxy password' %}";
                proxypasswordschema.format = "password";
                proxypasswordschema.required = false;
                if (readonly){
                    proxyserveripschema.readOnly = true;
                    proxyportschema.readOnly = true;
                    proxypasswordschema.readOnly = true;
                };

            } else {
                proxyserveripschema.type = "null";
                proxyportschema.type = "null";
                proxypasswordschema.type = "null";

            }
            schemas["$.security"] = securityschema;
            schemas["$.password"] = schema;
            schemas["$.proxyserverip"] = proxyserveripschema;
            schemas["$.proxyport"] = proxyportschema;
            schemas["$.proxypassword"] = proxypasswordschema;

            schemas["$.width"] = widthschema;
            schemas["$.height"] = heightschema;
            schemas["$.dpi"] = dpischema;
            setTimeout(function () {
                cb(schemas)
            }, 500); // in order to show asynchrony
        };


        var BrutusinForms = brutusin["json-forms"];
        BrutusinForms.bootstrap.addFormatDecorator("inputstream", "file", "glyphicon-search", function (element) {
            alert("user callback on element " + element)
        });
        BrutusinForms.bootstrap.addFormatDecorator("date", "date");
        BrutusinForms.bootstrap.addFormatDecorator("password", "password");
        BrutusinForms.bootstrap.addFormatDecorator("ipv4", "ipv4");
        var bf = BrutusinForms.create(schema);
        $.gbf = bf;
        bf.schemaResolver = resolver;
        var container = document.getElementById('container');
        bf.render(container, data);
    }
</script>
{% endblock %}